<template>
  <div id="mars3dContainer" class="mars3d-container"></div>
</template>

<script>
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
import "mars3d/mars3d.css";
import * as mars3d from "mars3d";

// import "mars3d-space";

export default {
  name: "mars3DMap",
  data() {
    return {
      map: null, // 存储地图实例
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const Cesium = mars3d.Cesium;
      // 地图配置
      const mapOptions = {
        scene: {
          center: { lat: 30.054604, lng: 108.885436, alt: 17036414, heading: 0, pitch: -90 },
          showSun: true,
          showMoon: true,
          showSkyBox: true,
          showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
          fog: true,
          fxaa: true,
          globe: {
            showGroundAtmosphere: false, // 关闭大气（球表面白蒙蒙的效果）
            depthTestAgainstTerrain: false,
            baseColor: "#546a53",
          },
          cameraController: {
            zoomFactor: 3.0,
            minimumZoomDistance: 1,
            maximumZoomDistance: 50000000,
            enableRotate: true,
            enableZoom: true,
          },
          mapProjection: mars3d.CRS.EPSG3857, // 2D下展示墨卡托投影
          mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL, // 2D下左右一直可以滚动重复世界地图
        },

        control: {
          baseLayerPicker: true, // basemaps底图切换按钮
          homeButton: true, // 视角复位按钮
          sceneModePicker: true, // 二三维切换按钮
          navigationHelpButton: true, // 帮助按钮
          fullscreenButton: true, // 全屏按钮
          contextmenu: { hasDefault: true }, // 右键菜单
        },
        terrain: {
          url: "https://data.mars3d.cn/terrain",
          show: true,
        },
        basemaps: [
          {
            name: "天地图影像",
            icon: "https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png",
            type: "tdt",
            layer: "img_d",
            show: true,
          },
        ],
      };

      // // 初始化地图
      this.map = new mars3d.Map("mars3dContainer", mapOptions);

      // // 添加底图
      // const baseLayer = new mars3d.layer.TileLayer({
      //   url: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
      //   subdomains: ["a", "b", "c"],
      // });
      // this.map.addLayer(baseLayer);
    },
  },
};
</script>

<style scoped>
.mars3d-container {
  width: 100%;
  height: 100vh; /* 让地图占满整个视口高度 */
}
</style>
